<template>
    <div>
        <el-form :inline="true" :model="page" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="page.ProductName" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="gethousingprice()">查询</el-button>
                <el-button type="success" @click="onRoomPrice()">添加房价计划</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="添加房价计划" :visible.sync="dialogFormVisibleAdd" width="60%">
            <HousingPriceAdd ref="housingPriceAdd" v-if="dialogFormVisibleAdd"></HousingPriceAdd>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改房价计划" :visible.sync="dialogFormVisibleEdit" width="60%">
            <housing-price-edit ref="housingPriceEdit" :Id="Id" v-if="dialogFormVisibleEdit"></housing-price-edit>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
                <el-button type="primary" @click="SaveEdit()">确 定</el-button>
            </div>
        </el-dialog>
        <el-table :data="housingPrice" border style="width: 100%">
            <el-table-column prop="housingTypeId" label="房型">
                <template slot-scope="scope">
                    <span v-if="scope.row.housingTypeId == 1">普通会员</span>
                    <span v-if="scope.row.housingTypeId == 2">VIP会员</span>
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="breakfastServings" label="早餐">
            </el-table-column>
            <el-table-column prop="paymentTerm" label="付款方式">
                <template slot-scope="scope">
                    <span v-if="scope.row.paymentTerm == 1">预定付费</span>
                    <span v-if="scope.row.paymentTerm == 2">到店付费</span>
                </template>
            </el-table-column>
            <el-table-column prop="normalPrice" label="价格">
                <template slot-scope="scope">
                    ${{ scope.row.normalPrice }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="DeleteHousingPrice(scope.row.id)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small" @click="UpdateHousingPrice(scope.row.id)">编辑</el-button>
                    <el-button type="text" size="small" @click="ShowHousingPrice(scope.row)">价格日历</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.pageIndex" :page-sizes="[2, 4, 6, 8]" :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import HousingPriceEdit from './Edit.vue'
import HousingPriceAdd from '@/views/HousingPrice/Add.vue'
import { List, Delete } from '@/api/HousingPrice'
export default {
    data() {
        return {
            housingPrice: [],
            page: {
                pageIndex: 1,
                pageSize: 2,
                ProductName: "",
            },
            totalCount: 0,
            dialogFormVisibleAdd: false,
            dialogFormVisibleEdit: false,
            Id: 0,
        }
    },
    components: {
        HousingPriceAdd,
        HousingPriceEdit
    },
    methods: {
        //修改
        UpdateHousingPrice(Id) {
            this.dialogFormVisibleEdit = true;
            this.Id = Id;
            console.log(this.Id);
        },
        SaveEdit() {
            this.$refs.housingPriceEdit.EditHousingPrice();
        },
        //显示
        gethousingprice() {
            List(this.page).then(res => {
                this.housingPrice = res.data;
                console.log(this.housingPrice);
                this.totalCount = res.totalCount
            })
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page.pageSize = val;
            this.gethousingprice();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page.pageIndex = val;
            this.gethousingprice();
        },
        //删除
        DeleteHousingPrice(Id) {
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Delete(Id).then(res => {
                    if (res) {
                        this.$message.success("删除成功");
                        this.gethousingprice();
                        return;
                    } else {
                        this.$message.error("删除失败");
                        return;
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        onRoomPrice() {
            this.dialogFormVisibleAdd = true
        },

        //添加
        saveAdd() {
            this.$refs.housingPriceAdd.AddHousingPrice();
        },
        //价格日历
        ShowHousingPrice(Housing) {
            // window.localStorage.setItem("normalPrice", Housing.normalPrice);
            // window.localStorage.setItem("roomQuantity", Housing.roomQuantity);
            window.localStorage.setItem("Id", Housing.id);
            window.localStorage.setItem('Housing', JSON.stringify(Housing));
            //localStorage.setItem(Housing);
            this.$router.push("/DatePicker")

        }
    },
    created() {
        this.gethousingprice();
    }
}
</script>
<style></style>